<template>
  <div class="uploadimg">
    <ele-upload-image
      :fileSize="10"
      :action="baseURL+uploadUrl"
      v-model="imgModels"
      :size="sizeimg"
      :responseFn="handleResponse"
      :isShowTip="false"
      :multiple='multipleopen'
      :headers='headersobj'
      @input="uploadinput"
      :isver='isvers'
      :width='imgWidth'
      :isb='isbigs'
      :isDelete='isdeleteicon'
      :isDisable='isDisable'
      @deleteimg='deleteimg'
      :imgLists='imgList'
      :limtNum='limtNum'
      :data='upData'
      :isListremove='isListremove'
    ></ele-upload-image>
    <div class="tipcontent" v-if="isshowText">
        <slot name="text">
            <slot name="loadtemplate"></slot>
        </slot>
    </div>
  </div>
</template>

<script>
// 图片上传组件
import EleUploadImage from './component/eleUploadImage/eleUploadImagem'
import {getAccessToken} from '@/utils/accessToken'
//上传图片的路径
import {baseURL} from '@/config/index'
export default {
  data() {
    return {
        baseURL,
        imgModels:'',
        //上传图片接口
        //上传图片 token
        headersobj:{
          token:getAccessToken()
        },
        //当图片上传数大于1时 隐藏文字
        isshowText:true
    }
  },
  props:{
    //限制上传几张图片
    limtNum:Number,
    uploadUrl:{
      type:String,
      default:()=>{
        return '/common/upload'
      }
    },
    upData:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    imgList:{
      type:Array,
      default:()=>{
        return []
      }
    },
    //是否禁止上传
    isDisable:{
      type:Boolean,
      default:false
    },
    //是否删除列表图
    isListremove:{
      type:Boolean,
      default:false
    },
    //是否显示删除按钮
    isdeleteicon:{
      type:Boolean,
      default:true
    },
    isbigs:{
      type:Boolean,
      default:false
    },
      imgWidth:{
        type:Number,
        default:150
      },
      isvers:{
        type:Boolean,
        default:true
      },
      //图片数据绑定
      imgModel:'',
      //上传组件的宽度大小
      sizeimg:{
        typs:Number,
        default:75
      },
      //是否开启多图上传？
      multipleopen:{
        type:Boolean,
        default:false
      },
      //最多上传几张
      limitNum:Number
  },
  methods:{
      handleResponse(response, file, fileList){
          //通知父组件 已经上传好了
          this.$emit('uploadimgok',response.data.url)
          // 根据响应结果, 设置 URL
          return response.data.url;
      },
      uploadinput(val){
        if(this.multipleopen&&val.length>0){
          this.isshowText = false
        }else{
          this.isshowText = true
        }
      },
      deleteimg(index){
        this.$emit('deleteimg',index)
      }
  },
  components:{
      EleUploadImage
  },
  watch:{
    imgModel(val){
      this.imgModels = val
    }
  }
}
</script>

<style scoped lang='scss'>
.uploadimg{
    display: flex;
    margin-bottom: 20px;
}
.tipcontent{
    margin-left: 10px;
    span{
        display: block;
        font-size: 12px;
        line-height: 24px !important;
        color: #999 !important;
    }
}
</style>
